<!--
 * @Author: fengYM feng25321@163.com
 * @Date: 2023-09-25 11:25:51
 * @LastEditors: fengYM feng25321@163.com
 * @LastEditTime: 2023-10-13 16:09:02
 * @Description: 销售奖励
-->
<template>
  <view>
    <view class="box_top main">
      <image class="bg" src="../../static/my/wddp.png" mode="aspectFill" />
      <view class="box_left">
        <view class="now">
          <view class="now_text">累计收益</view>
          <view class="now_num">
            <text class="money_icon">¥</text>
            <text>{{ info?.shopInfo.sellAmount || 0 }}</text>
          </view>
          <view class="btnF1">
            <view class="btn1" @click="goPage('/pages/myPage/withdrawal')">结算</view>
            <view class="btn1" style="margin-left: 20rpx" @click="goPage(`/pages/myPage/settlementRecords?id=${info?.shopInfo.shopId}`)">结算明细</view>
          </view>
        </view>
      </view>
      <view class="hxBox">
        <view class="item">
          <view class="s">服务商品</view>
          <view class="b">{{ info?.shopInfo.sellCount || 0 }}</view>
        </view>
        <view class="item">
          <view class="s">普通商品</view>
          <view class="b">{{ info?.shopInfo.sellCount || 0 }}</view>
        </view>
        <view class="item">
          <view class="s">累计售卖</view>
          <view class="b">{{ info?.count || 0 }}</view>
        </view>
      </view>
    </view>

    <view style="background: #fff">
      <view class="tabBox1">
        <view :class="{ tabItem: true, active: item.value === tabActive1 }" v-for="(item, index) in tabList1" @click="tabClick1(item)" :key="index">
          {{ item.name }}
        </view>
      </view>
      <u-tabs
        v-if="tabActive1 === '2'"
        :list="tabList"
        @click="tabClick"
        :activeStyle="{
          color: '#1E1E1E',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :current="tabActive.index"
        lineWidth="22"
        lineColor="#81d8d0"
      ></u-tabs>
      <view class="fwdd">
        <u-tabs
          v-if="tabActive1 === '1'"
          :list="tabList2"
          @click="tabClick"
          :activeStyle="{
            color: '#1E1E1E',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }"
          :current="tabActive.index"
          lineWidth="22"
          lineColor="#81d8d0"
        ></u-tabs>
      </view>
    </view>
    <view class="main">
      <template v-if="orderList?.length > 0">
        <view>
          <GoodsOrderItem v-for="(item, index) in orderList" :key="item.id" :info="item" isShop :getOrderList="reset"></GoodsOrderItem>
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
      <u-loadmore height="30" :status="goodsStatus" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, onBeforeMount, ref } from "vue";
import GoodsOrderItem from "@/components/goodsOrderIten.vue";
import pickRegions from "@/components/pick-regions/pickRegions.vue";
const info = ref();
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
import { goPage } from "@/utils/commonFn";

const tabActive = ref({
  index: 0,
  value: "",
});
const tabActive1 = ref("1");
const orderList = ref<any[]>([]);
const tabList = ref<any[]>([
  {
    name: "全部",
    value: "",
  },
  {
    name: "待发货",
    value: "PAY_SUCCESS",
  },
  {
    name: "已发货",
    value: "IN_DISTRIBUTION",
  },
  {
    name: "已完成",
    value: "CONFIRM_RECEIPT",
  },
  {
    name: "退款/售后",
    value: "RETURN",
  },
]);
const tabList2 = ref<any[]>([
  {
    name: "全部",
    value: "",
  },
  {
    name: "待核销",
    value: "PAY_SUCCESS",
  },
  {
    name: "已核销",
    value: "IN_DISTRIBUTION",
  },
]);
const tabList1 = ref<any[]>([
  {
    name: "服务订单",
    value: "1",
  },
  {
    name: "普通订单",
    value: "2",
  },
]);
const goodsStatus = ref("loadmore");
const goodsPage = ref(1);

const getList = async () => {
  if (goodsStatus.value == "nomore") {
    return;
  }
  goodsStatus.value = "loadmore";
  // const res: any = await selectSuppliersOrderLst({
  //   userId: uni.getStorageSync("userId"),
  //   status: tabActive.value.value,
  //   pageNo: goodsPage.value,
  //   type: tabActive1.value,
  // });
  orderList.value = orderList.value.concat(res.orderList);

  if (!res.next) {
    goodsStatus.value = "nomore";
  } else {
    goodsStatus.value = "loadmore";
  }
};
onReachBottom(() => {
  goodsPage.value++;
  getList();
});
const reset = () => {
  goodsPage.value = 1;
  goodsStatus.value = "loadmore";
  orderList.value = [];
  getList();
};

const tabClick = (e: any) => {
  tabActive.value.index = e.index as number;
  tabActive.value.value = e.value;
  reset();
};
const tabClick1 = (e: any) => {
  tabActive1.value = e.value;
  reset();
};
</script>

<style lang="less" scoped>
/deep/ .u-tabs__wrapper__nav__item {
  padding: 0 30px !important;
}
.fwdd {
  :deep(.u-tabs__wrapper__nav__item) {
    padding: 0 50px !important;
  }
}
.main {
  margin-top: 20rpx;
}
.box_top {
  position: relative;
  z-index: 99;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 312rpx;
    z-index: 1;
  }
  border-radius: 16rpx;
  padding: 40rpx 40rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  .box_left {
    position: relative;
    z-index: 99;
    color: #fff;
    font-weight: 400;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    .now {
      .now_text {
        line-height: 40rpx;
      }
      .now_num {
        font-weight: bold;
        font-size: 56rpx;
        line-height: 76rpx;
        font-family: DINPro-Bold, DINPro;
      }
    }

    .money_icon {
      margin-right: 6rpx;
      font-size: 32rpx;
      font-family: DINPro-Bold, DINPro;
      line-height: 62rpx;
    }
  }
  .box_right {
    background: #fff;
    border-radius: 24rpx;
    padding: 6rpx 42rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #426efe;
    line-height: 42rpx;
    margin-top: 40rpx;
  }
}
.hxBox {
  position: relative;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .item {
    display: flex;
    align-items: center;
    width: 100%;
    color: #ffffff;
    font-size: 26rpx;
    color: #ffffff;
    .b {
      font-size: 36rpx;
      font-weight: 500;
      margin-left: 20rpx;
    }
  }
}
.tabBox1 {
  display: flex;
  align-items: center;
  padding: 10rpx 30rpx;
  justify-content: space-between;
  .tabItem {
    width: 48%;
    text-align: center;
    padding: 15rpx 0;
    background: #f7f7f7;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    font-size: 26rpx;
    color: #3d3d3d;
  }
  .active {
    background: #81d8d0;
    color: #fff;
  }
}
:deep(.u-button--plain) {
  background: none;
}
.btnF1 {
  display: flex;
  margin-top: 42rpx;
}
.btn1 {
  background: #ffffff;
  text-align: center;
  border-radius: 50rpx;
  color: #81d8d0;
  padding: 12rpx 42rpx;
}
.reBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 9px;
}
:deep(.uni-picker-container) {
  z-index: 999999;
}
</style>
